<template>
	<view class="content">
		<!-- 本列表的标题 -->
		<view class="title">
			<view class="title_text"
				>{{ phase.title }}({{ my_case_list.length }})</view
			>
			<u-icon name="more-dot-fill" label-size="45" color="gray" />
		</view>
		<!-- 卡片列表容器 -->
		<view class="card_container" :id="phase._id['$oid']">
			<biz-case-card
				v-for="(item, index) in my_case_list"
				@card_click="case_detail"
        
				:key="index"
				:caseObj="item"
				:phaseObj="phase"
			></biz-case-card>
		</view>

		<!-- 添加新卡片的按钮 -->
		<u-button
			:hair-line="false"
			shape="square"
			type="plain"
			class="add-button-style"
			@click="add_new()"
			>{{ add_card_title }}</u-button
		>
	</view>
</template>

<script>
export default {
	data() {
		return {
			drag_target_id: "",
			active_item: {},
			add_card_title: this.GC.add_card_title,
		};
	},
	props: {
		phase: {
			type: Object,
			default() {
				return {
					id: "0",
					title: "新列表",
				};
			},
		},
		case_list: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	methods: {
		case_detail(item) {
			this.$emit("goto_detail", item);
		},

		add_new() {
			console.log("add new");
		},
	},
	computed: {
		my_case_list: function () {
			var phase_id = this.phase._id["$oid"];
			var filter_list = this.case_list.filter(
				(r) => r.phase_id["$oid"] == phase_id
			);
			return filter_list;
		},
	},
};
</script>

<style scoped lang="scss">
.content {
	min-width: 350rpx;
	margin-left: 24rpx;
	border-radius: 12rpx;
	background-color: rgba(233, 233, 233, 1);

	display: inline-block;
	vertical-align: top;
}

.title {
	display: flex;
	justify-content: space-between;
	padding-right: 24rpx;
	.title_text {
		font-weight: bolder;
		padding-left: 24rpx;
		height: 2.5em;
		line-height: 2.5em;
	}
}

.card_container {
	overflow-y: scroll;
	max-height: 80vh;
}

.card {
	min-height: 100rpx;
  border:red solid 1rpx;
	// width: 500rpx;
	// margin: 12rpx;
  // padding: 8rpx 12rpx;

	// border-radius: 8rpx;
	// background-color: white;

}

.add-button-style {
	width: 100%;
	border: none;
	border-top-left-radius: 0em;
	border-top-right-radius: 0em;
	font-size: x-small;
}
</style>
